<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn1">点击我设置cookie方式一</button>
    <button class="btn2">点击我设置cookie方式二</button>

    <script>
      // cookie: 小甜饼 。浏览器中存储数据的，浏览器通过小文件存储数据。cookie 标记网络状态的，随着http请求一起发送；

      // 1.设置 cookie ：
      // 时效性 ：默认是关闭浏览器的时候 自动销毁；
      // 浏览器查看 cookie ： 1.地址栏左边的感叹号   2.检查--application---cookies选项；
      let btn1 = document.querySelector(".btn1");
      let btn2 = document.querySelector(".btn2");
      btn1.onclick = function () {
        // 一、普通设置
        // document.cookie = "myname=hello";
        // 二、设置过期时间
        // let time = new Date();
        // time.setHours(new Date().getHours()+1);
        // // 设置 当前时间 + 过期时间的字符串形式；
        // document.cookie = `myname=123;expires=${time.toUTCString()}`;

        // 三、可以设置路径 ： 在这个路径同级或者之下 可以获取设置的cookie否则 就获取不到 ；
        let time = new Date();
        time.setHours(new Date().getHours() + 1);
        document.cookie = `myname=123;expires=${time.toUTCString()};path=/`;
      };

      btn2.onclick = function () {
        // max-age 注意 ： 单位是秒
        // js 一般时间单位毫秒 ；
        // 设置过期时间单位是秒；
        document.cookie = "myage=20;Max-Age=3600;path=/";
      };
    </script>
  </body>
</html>
